<!--

MySelect 调用方法 如下
  <template>
    <my-select class="item-value" :data="select" v-model="model"></my-select>
  </template>

data 结构如下
select: {
  placeholder: '请选择押金方式',
  val: {}, // 默认值
  options: [
    {
      str: '1',
      id: 1
    },
    {
      str: '2',
      id: 2
    },
    {
      str: '3',
      id: 3
    }]
  }

v-model 为 选中的值

{
  str: '1',
  id: 1
}
-->

<template lang="html">
  <div class="my-select" @click.stop="toggleShow">
    <div class="my-select__selected" v-if="val.str">{{val.str}}</div>
    <div class="my-select__placeholder" v-else>{{data.placeholder}}</div>
    <ul class="my-select__drap" v-show="showDrap">
      <li class="my-select__item"
          v-for="item in data.options"
          :key="item.id"
          @click.stop="select(item)">{{item.str}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data () {
    return {
      val: {},
      showDrap: false
    }
  },
  methods: {
    select (data) {
      this.showDrap = false
      if (data.id !== this.val.id) {
        this.val = Object.assign({}, data)
        this.$emit('input', this.val)
      }
    },
    toggleShow () {
      let uls = document.getElementsByClassName('my-select__drap')
      Array.prototype.slice.call(uls).map(item => {
        item.style.display = 'none'
      })
      this.showDrap = !this.showDrap
    },
    hideDrap () {
      this.showDrap = false
    }
  },
  mounted () {
    this.val = Object.assign({}, this.data.val)
    document.addEventListener('click', this.hideDrap)
  },
  destroyed () {
    document.removeEventListener('click', this.hideDrap)
  }
}
</script>

<style lang="less" scoped>
  @import "../styles/baseVar.less";

  ul, li{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .my-select{
    position: relative;
    padding-right: 25px; /* 50/40 */
    border: 1px solid #dadada;
    border-radius: 5px; /* 5/40 */
    background: url('../images/select_down.png') 95% no-repeat;
    background-size: 10px 6px; /* 21/40 */ /* 13/40 */
    box-sizing: border-box;
    .my-select__selected{
      margin-left: 10px; /* 20/40 */
    }
    .my-select__placeholder{
      margin-left: 10px; /* 20/40 */
      color: @color-999999;
    }
    .my-select__drap{
      position: absolute;
      width: 100%;
      border: 1px solid #dadada;
      background: #fff;
      box-sizing: border-box;
      max-height: 100px; /* 200/40 */
      overflow: auto;
      z-index: 999;
    }
    .my-select__item{
      padding-left: .50rem; /* 20/40 */
      &:hover{
        color: #fff;
        background: @badge-color;
      }
    }
  }
</style>
